<template>
	<zui-box>
		<zui-navbar title="微信"></zui-navbar>
		<u-gap height="20rpx"></u-gap>
		<u-gap height="20rpx"></u-gap>
		<view class="zui-form">
			<view class="zui_input">
				<u-input v-model="sms_code" shape="circle" placeholder="短信验证码" border="none" color="#999" clearable>
					<template slot="suffix">
						<zui-code type="1" :mobile="account" scene="reset_wallet"></zui-code>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input v-model="wechat_account" shape="circle" placeholder="请输入微信账号" border="none" clearable color="#999">
					<template slot="suffix">
						<u-icon name="photo" color="transparent" size="28"></u-icon>
					</template>
				</u-input>
				</view>
			<view class="upimgs">
				<view class="tit">请上传支付收款码</view>
				<view class="up_img" @click="upimgs">
					<image src="../../static/img/up_img.png" class="noimg" mode="" v-if="!wechat_qr_code"></image>
					<image :src="wechat_qr_code" mode="" v-else></image>
				</view>
			</view>
		</view>
		
		<u-gap height="80rpx"></u-gap>
		
		
		
		<zui-button bgColor="#AA334F" @fun="save">保存</zui-button>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			account: '',
			sms_code: '',
			wechat_account: '',
			wechat_qr_code: ''
		};
	},
	onShow() {
		this.getuser();
		this.get_info();
	},
	methods: {
		getuser() {
			uni.showLoading({
				title: '加载中...'
			});
			uni.$u.http
				.get('/app/user/getUserInfo', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					uni.hideLoading();
					this.account = res.mobile;
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		get_info() {
			uni.$u.http
				.get('/app/user_wallet/getWalletInfo', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.wechat_account = res.wechat_account;
					this.wechat_qr_code = res.wechat_qr_code;
				})
				.catch(err => {});
		},
		upimgs() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['album '],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					console.log(tempFilePaths);
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
						url: `${that.httpPath}/app/tool/uploadImage`,
						filePath: tempFilePaths,
						name: 'image',
						success: res => {
							uni.hideLoading();
							let data = JSON.parse(res.data);
							if (data.code == 1) {
								this.wechat_qr_code=`${that.httpPath}${data.data}`
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							});
						}
					});
				}
			});
		},
		save() {
			if (!this.sms_code) return this.say('请输入短信验证码');
			if (!this.wechat_account) return this.say('请输入微信账号');
			if (!this.wechat_qr_code) return this.say('请上传支付收款码');
			let url=this.wechat_qr_code.split(this.httpPath)[1]
			uni.$u.http
				.post(
					'/app/user_wallet/bindWechat',
					{
						sms_code: this.sms_code,
						wechat_account: this.wechat_account,
						wechat_qr_code: url
					},
					{
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
					uni.$u.toast('成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 1200);
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.zui-form {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	.zui_input {
		box-sizing: border-box;
		padding: 0 0 0 20rpx;
		border-radius: 104rpx;
		background: #fff;
		margin-bottom: 20rpx;
		/deep/.u-input__content {
			box-sizing: border-box;
			padding: 0 0 0 30rpx;
		}
		/deep/.u-input__content__field-wrapper__field {
			height: 104rpx !important;
		}
	}
}
.upimgs {
	width: 100%;
	border-radius: 20rpx;
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
	.tit {
		width: 100%;
		color: #999;
		font-size: 26rpx;
	}
	.up_img {
		width: 100%;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		min-height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.noimg{
			width: 160rpx;
		    height: 160rpx;
		}
		image {
			max-width: 90%;
			min-width: 160rpx;
			min-height: 160rpx;
		}
	}
}
</style>
